import React from 'react';
import { Chart, Geom, Axis, Coord, Guide, Shape } from 'bizcharts';
import autoHeight from '../autoHeight';

const { Arc, Html, Line } = Guide;

const defaultFormatter = (val) => {
    switch (val) {
    case '2':
        return '差';
    case '4':
        return '中';
    case '6':
        return '良';
    case '8':
        return '优';
    default:
        return '';
    }
};

Shape.registerShape('point', 'pointer', {
    drawShape(cfg, group) {
        let point = cfg.points[0];
        point = this.parsePoint(point);
        const center = this.parsePoint({
            x: 0,
            y: 0,
        });
        group.addShape('line', {
            attrs: {
                x1: center.x,
                y1: center.y,
                x2: point.x,
                y2: point.y,
                stroke: cfg.color,
                lineWidth: 2,
                lineCap: 'round',
            },
        });
        return group.addShape('circle', {
            attrs: {
                x: center.x,
                y: center.y,
                r: 6,
                stroke: cfg.color,
                lineWidth: 3,
                fill: '#fff',
            },
        });
    },
});

@autoHeight()
export default class Gauge extends React.Component {
    render() {
        const {
            title,
            height,
            percent,
            forceFit = true,
            formatter = defaultFormatter,
            color = '#2F9CFF',
            bgColor = '#F0F2F5',
        } = this.props;
        const cols = {
            value: {
                type: 'linear',
                min: 0,
                max: 10,
                tickCount: 6,
                nice: true,
            },
        };
        const data = [{ value: percent / 10 }];
        return (
            <Chart height={height} data={data} scale={cols} padding={[-16, 0, 16, 0]} forceFit={forceFit}>
                <Coord type="polar" startAngle={-1.25 * Math.PI} endAngle={0.25 * Math.PI} radius={0.8} />
                <Axis name="1" line={null} />
                <Axis
                    line={null}
                    tickLine={null}
                    subTickLine={null}
                    name="value"
                    zIndex={2}
                    gird={null}
                    label={{
                        offset: -12,
                        formatter,
                        textStyle: {
                            fontSize: 12,
                            fill: 'rgba(0, 0, 0, 0.65)',
                            textAlign: 'center',
                        },
                    }}
                />
                <Guide>
                    <Line
                        start={[3, 0.905]}
                        end={[3, 0.85]}
                        lineStyle={{
                            stroke: color,
                            lineDash: null,
                            lineWidth: 2,
                        }}
                    />
                    <Line
                        start={[5, 0.905]}
                        end={[5, 0.85]}
                        lineStyle={{
                            stroke: color,
                            lineDash: null,
                            lineWidth: 3,
                        }}
                    />
                    <Line
                        start={[7, 0.905]}
                        end={[7, 0.85]}
                        lineStyle={{
                            stroke: color,
                            lineDash: null,
                            lineWidth: 3,
                        }}
                    />
                    <Arc
                        zIndex={0}
                        start={[0, 0.965]}
                        end={[10, 0.965]}
                        style={{
                            stroke: bgColor,
                            lineWidth: 10,
                        }}
                    />
                    <Arc
                        zIndex={1}
                        start={[0, 0.965]}
                        end={[data[0].value, 0.965]}
                        style={{
                            stroke: color,
                            lineWidth: 10,
                        }}
                    />
                    <Html
                        position={['50%', '95%']}
                        html={() => {
                            return `
                <div style="width: 300px;text-align: center;font-size: 12px!important;">
                  <p style="font-size: 14px; color: rgba(0,0,0,0.43);margin: 0;">${title}</p>
                  <p style="font-size: 24px;color: rgba(0,0,0,0.85);margin: 0;">
                    ${data[0].value * 10}%
                  </p>
                </div>`;
                        }}
                    />
                </Guide>
                <Geom
                    line={false}
                    type="point"
                    position="value*1"
                    shape="pointer"
                    color={color}
                    active={false}
                />
            </Chart>
        );
    }
}
